<template>
    <div>
        <Modal v-model="isShow" title="管理权限" :mask-closable="false" class-name="modal">
            <div slot="close" @click="close">
                <Icon type="md-close" size="20" />
            </div>

            <Form>

                <div v-for="(item, index) in menuList" :key="index" class="group">

                    <CheckboxGroup v-model="parentArr" @on-change="handleGroupCheckAll(item,index)">
                        <Checkbox :label="item.name"></Checkbox>
                    </CheckboxGroup>

                    <CheckboxGroup v-model="childArr[index]" @on-change="handleChildCheck(item,index)">
                        <Checkbox v-for="(child, index) in item.data" :key="index" class="checkbox" :label="child"></Checkbox>
                    </CheckboxGroup>
                </div>

            </Form>

            <footer class="modalFooter" slot="footer">
                <Checkbox :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
                <div>
                    <Button type="default" @click="close">取消</Button>
                    <Button type="primary" @click="save">保存</Button>
                </div>
            </footer>
        </Modal>
    </div>
</template>

<script>
    import {
        getMenuByRouter
    } from '@/libs/util.js'
    import routes from '@/router/routers'
    export default {
        props: ['isShow'],
        data() {
            return {
                // 是否全部选中
                checkAll: false,
                // 父级选中列表
                parentArr: [],
                childArr: [],

                // 路由菜单列表
                menuList: [],


            }
        },
        methods: {
            // 全部选中
            handleCheckAll() {
                this.checkAll = !this.checkAll
                if (this.checkAll) {
                    this.menuList.forEach((item, i) => {
                        if (this.parentArr.indexOf(item.name) === -1) {
                            this.parentArr.push(item.name)
                        }
                        this.childArr[i] = item.data
                    })
                } else {
                    this.parentArr = []
                    this.childArr = []
                }

            },

            // 每组全部选中
            handleGroupCheckAll(item, index) {
                if (this.parentArr.indexOf(item.name) !== -1) {
                    this.childArr[index] = item.data
                } else {
                    this.childArr[index] = []
                    this.checkAll = false
                }
                if (this.parentArr.length === this.menuList.length) {
                    this.checkAll = true
                }
            },

            // 子级选中
            handleChildCheck(item, index) {
                if (item.data.length === this.childArr[index].length) {
                    this.parentArr.push(item.name)
                } else {
                    let i = this.parentArr.indexOf(item.name)
                    if (i !== -1) {
                        this.parentArr.splice(i, 1)
                        this.checkAll = false
                    }
                }
                if (this.parentArr.length === this.menuList.length) {
                    this.checkAll = true
                }
            },
            close() {
                this.$emit('close')
            },
            save() {}
        },
        created() {
            // 获取路由菜单
            let menuArr = getMenuByRouter(routes);
            menuArr.forEach((item) => {
                let meta = item.meta
                let childrens = item.children
                let data = []

                if (childrens.length > 1) {
                    childrens.forEach((child) => {
                        data.push(child.meta.title)
                    })
                }
                this.menuList.push({
                    name: meta.title,
                    data: data
                })
            })
        }
    }
</script>

<style lang='less'>
    .modal .ivu-modal-body {
        padding: 0;
        font-size: 12px;
        line-height: 1.5;
    }

    .group {
        padding: 20px;
        border-bottom: 1px solid #e9e9e9;

        .checkbox {
            margin-top: 15px;
        }
    }

    .modalFooter {
        display: flex;
        justify-content: space-between;
    }
</style>